<template>
  <view class="result-page">
    <view class="result-icon">
      <uni-icons 
        :type="status === 'success' ? 'checkmarkempty' : 'closeempty'" 
        size="60" 
        :color="status === 'success' ? '#4cd964' : '#dd524d'"
      ></uni-icons>
    </view>
    <view class="result-text">
      {{status === 'success' ? '支付成功' : '支付失败'}}
    </view>
    <view class="result-desc" v-if="status === 'success'">
      订单已支付，商家正在准备您的餐品
    </view>
    <view class="result-desc" v-else>
      支付失败，请重新尝试或选择其他支付方式
    </view>
    
    <view class="order-info" v-if="status === 'success'">
      <view class="info-item">
        <text>订单号</text>
        <text>{{order.id}}</text>
      </view>
      <view class="info-item">
        <text>支付金额</text>
        <text class="price">¥{{order.total.toFixed(2)}}</text>
      </view>
      <view class="info-item">
        <text>支付时间</text>
        <text>{{formatTime(order.paymentTime)}}</text>
      </view>
    </view>
    
    <view class="action-btns">
      <button class="back-btn" @click="goBack">返回首页</button>
      <button class="detail-btn" @click="viewOrderDetail">查看订单</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      status: 'success',
      orderId: '',
      order: {}
    }
  },
  onLoad(options) {
    this.status = options.status || 'success';
    this.orderId = options.id;
    this.loadOrder();
  },
  methods: {
    loadOrder() {
      // 从本地存储获取订单
      const orders = uni.getStorageSync('orders') || [];
      this.order = orders.find(item => item.id === this.orderId) || {};
    },
    formatTime(timeStr) {
      if (!timeStr) return '';
      const date = new Date(timeStr);
      return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}`;
    },
    goBack() {
      uni.switchTab({
        url: '/pages/index/index'
      });
    },
    viewOrderDetail() {
      uni.navigateTo({
        url: `/pages/order/detail?id=${this.orderId}`
      });
    }
  }
}
</script>

<style scoped>
.result-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
}

.result-icon {
  margin-bottom: 20px;
}

.result-text {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.result-desc {
  color: #666;
  margin-bottom: 30px;
}

.order-info {
  width: 100%;
  background: #f5f5f5;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 30px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 14px;
}

.info-item .price {
  color: #1296db;
  font-weight: bold;
}

.action-btns {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.back-btn, .detail-btn {
  width: 48%;
  border-radius: 25px;
}

.back-btn {
  background: #fff;
  color: #333;
  border: 1px solid #ddd;
}

.detail-btn {
  background: #1296db;
  color: #fff;
}
</style>